<script lang="ts" setup>
import { ref } from 'vue';
import { usePopupStore } from '@/store/popup';
import { storeToRefs } from 'pinia';
import { getAddressList } from '@/api/car';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const popupStore = usePopupStore();
const { carHotelPickerRef } = storeToRefs(popupStore);

const props = withDefaults(
  defineProps<{
    id: number;
    serviceType: string;
  }>(),
  {
    id: 0,
    serviceType: 'pickUp'
  }
);

const chooseId = ref(0);
const serviceType = ref('pickUp');
const list = ref<any[]>([]);
const keyword = ref('');
const isSearch = ref(false);

popupStore.onOpened('CAR_HOTEL', async () => {
  chooseId.value = props.id;
  serviceType.value = props.serviceType;
  await getHotelList();
});

async function getHotelList() {
  const payload: any = {
    pagination: false,
    typeId: 4,
    keyword: keyword.value
  };
  const res = await getAddressList(payload);
  if (res.code == 0) {
    list.value = res.data.list;
  } else {
    list.value = [];
  }
}

async function searchKeyword(e: any) {
  keyword.value = e.detail.value;
  await getHotelList();
  isSearch.value = !!e.detail.value;
}

const emit = defineEmits<{
  update: [id: number, showname: string, address: string];
}>();

function chooseAddress(item: any) {
  popupStore.closeCarHotelPicker();
  emit('update', item.id, item.name, item.address);
}
</script>

<template>
  <apt-popup-car
    ref="carHotelPickerRef"
    :showConfirmBtn="false"
    :title="serviceType == 'pickUp' ? t('TransferDropLocation') : t('TransferBoardingLocation')"
    background="#F8F8F8"
    height="80vh"
    title-position="left"
    @close="popupStore.closeCarHotelPicker()"
  >
    <view class="apt-car-hotel-picker-contain">
      <view class="apt-car-hotel-picker-contain-search">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_hotel_search.png"
        />
        <input
          v-model="keyword"
          :placeholder="t('TransferEnterName')"
          confirm-type="search"
          placeholder-class="placeholder"
          @confirm="searchKeyword"
        />
      </view>
      <view class="apt-car-hotel-picker-contain-view">
        <view class="apt-car-hotel-picker-contain-view-title">
          {{ isSearch ? t('TransferSearchResult') : t('TransferHouseList') }}
        </view>
        <view v-if="list.length > 0" class="apt-car-hotel-picker-contain-view-list">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="apt-car-hotel-picker-contain-view-list-item"
            @click="chooseAddress(item)"
          >
            <view class="apt-car-hotel-picker-contain-view-list-item-t">
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_hotel_list.png"
              />
              {{ item.name }}
            </view>
            <view class="apt-car-hotel-picker-contain-view-list-item-b">{{ item.address }}</view>
          </view>
        </view>
        <view v-else class="apt-car-hotel-picker-contain-view-empty">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_hotel_empty.png"
          />
          <view>{{ t('TransferNoAddress') }}</view>
        </view>
      </view>
    </view>
  </apt-popup-car>
</template>

<style lang="scss">
.apt-car-hotel-picker-contain {
  &-search {
    display: flex;
    align-items: center;
    padding: 26rpx 32rpx;
    background: #ffffff;
    border-radius: 12rpx;

    image {
      display: block;
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

    input {
      flex: 1;
      font-weight: 500;
      font-size: 32rpx;
      color: #3d3d3d;
      line-height: 44rpx;

      &.placeholder {
        color: #afafaf;
      }
    }
  }

  &-view {
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 32rpx;

    &-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
    }

    &-list {
      &-item {
        border-bottom: 1px solid #f4f4f4;

        &:last-child {
          border-bottom: none;
        }

        padding: 24rpx 0;

        &-t {
          display: flex;
          align-items: center;

          image {
            display: block;
            width: 28rpx;
            height: 28rpx;
            margin-right: 8rpx;
          }

          font-weight: 500;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;
        }

        &-b {
          padding-left: 36rpx;
          margin-top: 8rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #b0adad;
          line-height: 34rpx;
          white-space: nowrap; /* 保持文本在一行内 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
        }
      }
    }

    &-empty {
      padding: 80rpx 0 140rpx;

      image {
        display: block;
        width: 410rpx;
        height: 410rpx;
        margin: 0 auto;
      }

      view {
        font-weight: 400;
        font-size: 28rpx;
        color: #afafaf;
        line-height: 44rpx;
        text-align: center;
      }
    }
  }
}
</style>
